import React from "react";
import styles from "./index.module.less";
import Mbottom from "@components/mBottom";
import sex0 from "@images/sex0.webp";

const MyApp = () => {
    return (
        <div className={styles.my}>
            <div className={styles.my_main}>
                <div className={styles.part1}>
                    <div className={styles.avatar}>
                        <img src={sex0} alt="" />
                    </div>
                    <div className={styles.names}>
                        <p>用户昵称</p>
                        <p>用户名</p>
                    </div>
                    <div className={styles.my_gmoney}>
                        我的G币: <span>233</span>
                    </div>
                </div>
                <div className={styles.part2}>
                    <p>
                        <span className={styles.s1}>0</span>
                        <br />
                        <span>购物车</span>
                    </p>
                    <p>
                        <span className={styles.s1}>21</span>
                        <br />
                        <span>历史浏览</span>
                    </p>
                </div>
                <div className={styles.division}></div>
                <div className={styles.part3}>
                    {[
                        { text: "在售", num: 2 },
                        { text: "已售出", num: 0 },
                        { text: "已下架", num: 5 },
                        { text: "已购买", num: 10 },
                    ].map((item, index) => {
                        return (
                            <p key={index}>
                                <span className={styles.s1}>{item.num}</span>
                                <br />
                                <span>{item.text}</span>
                            </p>
                        );
                    })}
                </div>
            </div>
            <Mbottom />
        </div>
    );
};

export default MyApp;
